<template>
  <div class="wrapper">
    <search-form :area="'question'" @handleAdd="handleAdd" @search="search" @handleDel="handleDel"> </search-form>
    <a-card :body-style="{ padding: 0 }" :bordered="false">
      <a-spin :indicator="indicator" :spinning="spinning" tip="获取数据中...">
        <div class="spin-content">
          <a-table size="small" bordered :rowKey="record => record.ID" :columns="columns" :dataSource="data" :pagination="pagination" :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" :rowClassName="setRowClassName">
            <span slot="action" slot-scope="text, record">
              <template>
                <a type="link" @click="handleAnswers(record)">答案管理</a>
                <a-divider type="vertical" />
                <a type="link" @click="handleEdit(record)">修改</a>
                <a-divider type="vertical" />
                <a size="small" type="link" @click="handleView(record)">查看</a>
              </template>
            </span>
          </a-table>
        </div>
      </a-spin>
    </a-card>
    <info-modal :actionType="action" ref="infomodal" @save="handleSave"></info-modal>
    <infomodal-answers ref="infomodalanswers"></infomodal-answers>
  </div>
</template>

<script>
import { questionCategoryList, questionBankSave, questionBankDel, questionBankList, questionBankInfo } from '@/api/question'
import SearchForm from './modules/searchform'
import InfoModal from './modules/infomodalQuestion'
import InfomodalAnswers from './modules/infoModalAnswers'
import { mapActions, mapGetters } from 'vuex'
import { tranDate } from '@/utils/util'
import { dropList } from '@/api/drop'
import dropValue from '@/views/dropValue'
export default {
  components: { SearchForm, InfoModal, InfomodalAnswers },
  props: {},
  data() {
    return {
      action: 'add',
      indicator: <a-icon type="loading" style="font-size: 24px" spin />,
      rowStyle: 'overflow: hidden;text-overflow: ellipsis;display:-webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;',
      spinning: false,
      data: [],
      form: this.$form.createForm(this),
      queryParam: {
        index: 1,
        pageSize: 10
      },
      columns: [
        {
          title: '问题分类',
          dataIndex: 'categoryName',
          key: 'categoryName',
          align: 'center'
        },
        {
          title: '年龄段',
          dataIndex: 'AgeGroupName',
          key: 'AgeGroupName',
          align: 'center'
        },
        {
          title: '分数',
          dataIndex: 'score',
          key: 'score',
          align: 'center'
        },
        {
          title: '难度等级',
          dataIndex: 'star',
          key: 'star',
          align: 'center'
        },
        {
          title: '题目',
          dataIndex: 'questionDescribe',
          key: 'questionDescribe',
          align: 'center'
        },
        {
          title: '操作',
          width: '100px',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
          width: 150,
          align: 'center'
        }
      ],
      selectedRowKeys: [],
      pagination: {
        onChange: (index, pageSize) => {
          this.pageOnChange(index, pageSize)
        },
        current: 1,
        total: 0,
        showQuickJumper: true,
        size: 'small',
        defaultPageSize: 10,
        showTotal: total => `共 ${total} 条数据`,
        showSizeChanger: true,
        pageSizeOptions: ['5', '10', '15', '20'],
        onShowSizeChange: (index, pageSize) => {
          this.pageOnChange(index, pageSize)
        },
        position: 'bottom'
      }
    }
  },
  watch: {},
  computed: {
    ...mapGetters(['token'])
  },
  methods: {
    initData(data) {
      this.spinning = true
      dropList({ categoryId: dropValue.questionDict }).then(dict1 => {
        questionBankList(data)
          .then(res => {
            let data = res.data
            data.map(a => {
              var dictData1 = dict1.find(b => b.ID == a.categoryID)
              a.categoryName = dictData1 ? dictData1.Title : null
            })
            this.pagination.total = res.page.RecordCount
            setTimeout(() => {
              this.data = data
            }, 500)
          })
          .finally(() => {
            this.spinning = false
          })
      })
    },
    search(data) {
      Object.assign(this.queryParam, data, { index: 1 })
      this.pagination.current = 1
      this.initData(this.queryParam)
    },
    handleAdd() {
      this.action = 'add'
      this.$refs.infomodal.add()
    },
    handleSave(data, id) {
      this.action === 'edit' ? Object.assign(data, { id: id }) : null
      questionBankSave(data).then(res => {
        this.initData(this.queryParam)
      })
    },
    handleAnswers(data) {
      this.$refs.infomodalanswers.show(data.ID)
    },
    handleEdit(data) {
      this.spinning = true
      this.action = 'edit'
      questionBankInfo({ id: data.ID })
        .then(res => {
          let value = res.data
          this.$refs.infomodal.edit(value)
        })
        .finally(() => {
          this.spinning = false
        })
    },
    handleDel() {
      this.spinning = true
      questionBankDel(this.selectedRowKeys).then(res => {
        this.initData(this.queryParam)
        this.selectedRowKeys = []
      })
    },
    handleView(data) {
      this.spinning = true
      this.action = 'view'
      questionBankInfo({ id: data.ID })
        .then(res => {
          let value = res.data
          this.$refs.infomodal.view(value)
        })
        .finally(() => {
          this.spinning = false
        })
    },
    exportXls(data) {},
    setRowClassName(record, idx) {
      return idx % 2 == 1 ? 'bg-zebra-pattern' : ''
    },
    onSelectChange(selectedRowKeys) {
      // console.log('selectedRowKeys changed: ', selectedRowKeys)
      this.selectedRowKeys = selectedRowKeys
    },
    pageOnChange(index, pageSize) {
      this.spinning = true
      Object.assign(this.pagination, {
        current: index,
        pageSize,
        index
      })
      Object.assign(this.queryParam, {
        pageSize,
        index
      })
      this.initData(this.queryParam)
    }
  },
  created() {
    this.initData(this.queryParam)
  },
  mounted() {}
}
</script>
<style lang="less" scoped></style>
